{% extends 'base/base.html' %}
{% block title %}
    首页
{% endblock %}

{% block main %}

{#    {{ object_list }} {{ is_paginated }} {{ paginator }} {{ page_obj.has_previous }}#}
    <style>
    .list-group {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 0;
            list-style: none;
            {#position: absolute;#}
        }
        .list-group li {
            width: 100%;
            flex: 1 1 0;
            margin: 0;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
            justify-content: space-between; /* 水平分布 */
        }
    </style>

    <ul class="list-group">
        {% for article in object_list %}
         <li class="list-group-item">
             <a href="{% url 'main:article_detail' article.id %}"> {{ article.content|safe }} {{ article.title }}</a>
             <hr>
                <a class="btn btn-warning" href="{% url 'user:article_update' article.id %}" role="button">编辑</a>
                <a class="btn btn-danger" href="{% url 'user:article_delete' article.id %}" role="button">删除</a>
         </li>
        {% endfor %}
    </ul>


    <nav aria-label="Page navigation">
      <ul class="pagination">
        {% if page_obj.has_previous %}

        <li>
        <a href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
        {% else %}
        <li class="disabled">
        <a href="#" aria-label="Previous">
        {% endif %}
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

          {% for pn in paginator.page_range %}
              {% if pn != page.number %}
              <li><a href="?page={{ pn }}">{{ pn }}</a></li>
              {% else %}
              <li class="disabled"><a href="?page={{ pn }}">{{ pn }}</a></li>
              {% endif %}
          {% endfor %}


        {% if page_obj.has_next %}
        <li>
        <a href="?page={{ page_obj.next_page_number }}" aria-label="Next">
        {% else %}
        <li class="disabled">
        <a href="#" aria-label="Next">
        {% endif %}

            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

{% endblock %}

